<template>

  <div>

    <!--   分类展示  -->
    <el-row>
      <transition name="el-zoom-in-left">
        <el-button type="primary"
                   round
                   @click="chooseType(0)"
                   v-show="show"
                   style="margin:10px">全部物品</el-button>
      </transition>

      <transition name="el-zoom-in-left"
                  v-for="(t,index) in typeData"
                  :key="index">
        <el-button type="success"
                   round
                   v-show="show"
                   @click="chooseType(t.id)"
                   style="margin:10px 10px">{{t.name}}</el-button>

      </transition>
    </el-row>

    <!-- 模糊查询 -->
    <transition name="el-zoom-in-bottom">
      <el-row style="margin-top: 10px;"
              v-show="show">
        <el-input v-model="serverLike"
                  placeholder="请输入名称或内容查询"
                  style="width:25%"></el-input>
        <el-button icon="el-icon-search"
                   circle
                   @click="search"></el-button>
        <!-- <el-input v-model="serverLike"
                placeholder="请输入服务名或服务内容查询"
                style="width:25%"></el-input>
      <el-button icon="el-icon-search"
                 circle
                 @click="search"></el-button> -->

      </el-row>
    </transition>

    <!-- 页码选择 -->
    <transition name="el-zoom-in-top">
      <el-row v-show="show">

        <el-row style="margin-top: 20px;">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[1,3,5,10,15,20]"
                         :page-size="size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-row>

        <el-row style="margin-top: 20px;">
          <el-radio-group v-model="orderField">
            <el-radio :label="0"
                      @change="findByPage">默认</el-radio>
            <el-radio label="1"
                      @change="findByPage">类型</el-radio>
            <el-radio :label="2"
                      @change="findByPage">浏览次数</el-radio>
            <el-radio :label="3"
                      @change="findByPage">价格</el-radio>
            <el-radio :label="4"
                      @change="findByPage">点赞数</el-radio>
          </el-radio-group>
          <i class="el-icon-sort"
             style="margin:0px 20px"></i>
          <el-radio-group v-model="orderType">
            <el-radio :label="true"
                      @change="findByPage">升序</el-radio>
            <el-radio :label="false"
                      @change="findByPage">降序</el-radio>
          </el-radio-group>
        </el-row>

      </el-row>
    </transition>

    <!--服务列表主体页面-->
    <div style="float:left; margin-top: 20px; height: 500px;width:405"
         v-for="(ta,index) in tableData"
         :key="index"
         @click="showAndOrder(ta)">

      <transition name="el-zoom-in-center">
        <div v-show="show"
             class="transition-box">{{ta.name}}</div>
      </transition>

      <transition name="el-zoom-in-left">
        <el-image v-show="show"
                  class="transition-box2"
                  :src="ta.image">
          <div slot="error">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2165691866,2570924737&fm=26&gp=0.jpg"
                 width="300px"
                 height="250px">
          </div>
        </el-image>
      </transition>

      <div style="display: flex; height: 100px;width:405">
        <transition name="el-zoom-in-top">
          <div v-show="show"
               class="transition-box3">
            <i class="el-icon-view"> {{ta.times}}</i>
            <i class="el-icon-star-on"> {{ta.agreeNum}}</i>
            <i></i>
          </div>
        </transition>
        <transition name="el-zoom-in-bottom">
          <div v-show="show"
               class="transition-box4">
            ¥：{{ta.price}}
          </div>
        </transition>
      </div>
    </div>

    <!--下单框-->
    <el-dialog title="物品详情与购买"
               :visible.sync="orderVisible"
               width="90%"
               height="80%">
      <BuyItem :server="currentServer"
               v-if="refresh"
               @closedialog="closeOrderVisible"></BuyItem>
      <span slot="footer"
            class="dialog-footer">
      </span>
    </el-dialog>

    <!-- 详情框 -->
    <el-dialog title="我发布的物品"
               :visible.sync="infoVisivle"
               width="90%"
               height="80%">
      <MyItem :server="currentServer"
              v-if="refresh"
              @closedialog="closeInfoVisible"></MyItem>
      <span slot="footer"
            class="dialog-footer">
      </span>

    </el-dialog>

  </div>

</template>


<script>

//导入axios

import http from '../../../axios_config'

import axios from 'axios'
import BuyItem from './buyPage/BuyItem'
import MyItem from './buyPage/MyItem'


export default {
  //2.注册子组件
  components: {
    BuyItem,
    MyItem,
  },
  data () {
    return {
      //分类数据
      typeData: [],
      //提供的服务数据
      tableData: [],
      //控制订购框是否显示
      orderVisible: false,
      //详情框是否显示
      infoVisivle: false,
      //指向当前被选中的teacher信息对象
      currentServer: {},
      //强制刷新子组件
      refresh: true,
      //当前页
      currentPage: 1,
      //总条数
      total: 0,
      //总页数
      totalPage: 0,
      //每一页的条数
      size: 3,
      //类型
      serverType: 0,
      //名字
      serverLike: '',
      //显示子项
      show: false,
      //排序
      orderField: 0,
      orderType: true,
    }
  },

  methods: {

    //查看详情和下单方法
    showAndOrder (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //将选择查看的那一行信息显示
      this.currentServer = row;
      //   let ping = setTimeout(() => {
      //     this.orderVisible = true;
      //     clearTimeout(ping);
      //   }, 200);
      console.log(row);
      if (row.own == false) {
        this.orderVisible = true;
      } else {
        this.infoVisivle = true;
      };
      if (row.isViewed == false) {
        http.post("http://192.168.11.18:8080/goods/updateViewTimes?id=" + row.id);
        this.findByPage();
      }
    },

    //关闭订单框方法
    closeOrderVisible () {
      //关闭对话框
      this.orderVisible = false;
    },
    closeInfoVisible (data) {
      if (data.result) {
        this.findByPage();
      }
      this.infoVisivle = false;
    },

    //选择每页条数
    handleSizeChange (size) {
      console.log("选择：" + size);
      this.size = size;
      //发请求
      this.findByPage();
    },

    //改变页数
    handleCurrentChange (page) {
      console.log("选择：" + page + "页");
      this.currentPage = page;
      //发送页数请求
      this.findByPage();
    },


    //向服务器发送请求获取数据
    findByPage () {
      //隐藏数据的显示
      this.show = false;
      //利用axios
      http.get("http://192.168.11.18:8080/goods/selectMyGoods?Page=" + this.currentPage +
        "&size=" + this.size + "&type=" + this.serverType +
        "&name=" + this.serverLike + "&content=" + this.serverLike +
        "&orderField=" + this.orderField + "&orderType=" + this.orderType).then(res => {
          //success后执行 res是返回的结果 
          this.tableData = res.data.data;
          console.log(this.tableData);
          //分页数据
          this.currentPage = res.data.currentPage;
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.size = res.data.pageSize;
          let num = setTimeout(() => {
            this.show = true;
            clearTimeout(num);
          }, 200);
        });


    },

    //改变服务类型的方法
    chooseType (tid) {
      this.serverType = tid;
      this.serverLike = '';
      this.currentPage = 1;
      console.log(tid);
      this.findByPage();
    },
    //模糊查询
    search () {
      console.log("模糊查询");
      this.serverType = 0;
      this.currentPage = 1;
      this.findByPage();

    },

    //获取服务的分类
    getServerType () {
      http.get("http://192.168.11.18:8080/goodsType/selectGoodsType").then(res => {
        //success后执行 res是返回的结果 
        this.typeData = res.data;
        console.log(this.typeData);
      });
    }
  },

  //当前创建组件完毕时调用
  mounted () {
    this.orderField = 0;
    this.orderType = true;
    //调用方法，获取分类
    this.getServerType();
    //利用方法，初始化页面信息
    this.findByPage();
  }
}
</script>

<style>
.transition-box {
  width: 300px;
  height: 100px;
  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 10px 10px;
}
.transition-box2 {
  width: 300px;
  height: 250px;

  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 0px 0px;
  box-sizing: border-box;
  margin: 0px 10px;
}
.transition-box3 {
  width: 140px;
  height: 100px;
  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 5px 10px;
}
.transition-box4 {
  width: 140px;
  height: 100px;
  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 5px 10px;
}
</style>